<template>
  <div class="container">
    <el-row>
      <el-col :span="6">【题型】：{{ mapObj[detailList.questionType] }}</el-col>
      <el-col :span="6">【编号】：{{ detailList.id }}</el-col>
      <el-col :span="6"
        >【难度】：{{ mapDiffObj[detailList.difficulty] }}</el-col
      >
      <el-col :span="6">【标签】：{{ detailList.tags }}</el-col>
    </el-row>
    <el-row style="margin: 20px 0">
      <el-col :span="6">【学科】：{{ detailList.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ detailList.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ detailList.direction }}</el-col>
    </el-row>
    <hr />
    <el-row style="margin: 10px 0">
      <el-col :span="12"
        >【题干】：
        <span v-html="detailList.question" style="color: #3900ff"></span>
      </el-col>
    </el-row>
    <!-- 单选 -->
    <div v-if="detailList.questionType === '1'">
      <div>单选题 选项：（以下选中的选择为正确答案）</div>
      <div
        style="margin: 8px"
        v-for="item in detailList.options"
        :key="item.id"
      >
        <el-radio :value="1" :label="item.isRight">{{ item.title }}</el-radio>
      </div>
    </div>
    <!-- 多选 -->
    <div v-else-if="detailList.questionType === '2'">
      <div>多选题 选项：（以下选中的选择为正确答案）</div>
      <div
        style="margin: 8px"
        v-for="item in detailList.options"
        :key="item.id"
      >
        <el-checkbox-group :value="[1]">
          <el-checkbox :label="item.isRight">{{ item.title }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 简答 -->
    <div v-else></div>

    <hr />
    <el-row style="margin: 10px 0">
      <el-col :span="24"
        >【参考答案】：
        <el-button type="danger" size="small" @click="isShow = true"
          >视频答案预览</el-button
        >
        <div class="video" style="width: 400px; height: 300px" v-show="isShow">
          <video
            :src="detailList.videoURL"
            controls="controls"
            width="100%"
            height="100%"
          ></video>
        </div>
      </el-col>
    </el-row>

    <hr />

    <!-- <el-row style="margin: 10px 0"> -->
    <!-- 用正则去掉标签的样式 -->
    <div style="display: inline-block">
      【答案解析】：
      <div style="display: inline-block" v-html="detailList.answer"></div>
    </div>
    <!-- <el-col :span="24" style="display: inline-block"
        >【答案解析】：
        <span v-html="detailList.answer"></span>
      </el-col>
    </el-row> -->

    <hr />

    <el-row style="margin: 10px 0">
      <el-col :span="24">【题目备注】：{{ detailList.remarks }}</el-col>
    </el-row>

    <div style="text-align: right; margin-top: 20px">
      <el-button type="primary" size="small" @click="closeHandler"
        >关闭</el-button
      >
    </div>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
// import { questionType } from '@/api/hmmm/constants'
export default {
  props: {
    questionsId: {
      require: true
    },
    mapObj: {
      require: true
    },
    mapDiffObj: {
      require: true
    }
  },
  data () {
    return {
      detailList: {},
      isShow: false
    }
  },
  created () {
    this.getDetail()
    // this.getMap()
  },
  methods: {
    // getMap () {
    //   questionType.forEach((item) => {
    //     this.mapObj[item.value] = item.label
    //   })
    // },
    async getDetail () {
      const res = await detail({ id: this.questionsId })
      console.log(res.data)
      this.detailList = res.data
    },
    closeHandler () {
      this.$emit('success')
    }
  }
}
</script>

<style scoped></style>
